<template>
	<view class="content">
		<view><wyb-drop-down ref="dropDown" :options="options"></wyb-drop-down></view>

		<view class="list">
			<view class="item" v-for="index in 12" :key="index" @click="openLoupanDetails">
				<view class="item-image"><image src="../../../static/loupan_item2.png" mode="widthFix"></image></view>
				<view v-if="index % 2 == 1">
					<view class="item-title">天和尚上海</view>
					<view class="item-content">150m²/北欧风</view>
				</view>
				<view v-else>
					<view class="item-title">静安新城</view>
					<view class="item-content">123m²/地中海</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';

export default {
	data() {
		return {
			options: [
				{
					header: '区域',
					contents: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区', '浏阳市', '宁乡市', '长沙县']
				},
				{
					header: '风格',
					contents: ['恬淡田园风格', '新中式风格装修', '现代简约风格', '欧式古典风格', '地中海风格', '东南亚风格']
				},
				{
					header: '户型',
					contents: ['115m²', '120m²', '135m²', '140m²']
				}
			]
		};
	},
	components: {
		wybDropDown
	},
	methods: {
		openLoupanDetails(){
			uni.navigateTo({
				url:'/pages/index/loupan/details/details'
			})
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	padding-top: 96rpx;

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 22rpx;
		padding: 22rpx;

		.item {
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

			.item-image {
				width: 100%;

				image {
					border-radius: 12rpx 12rpx 0 0;
					display: block;
					width: 100%;
				}
			}
			.item-title {
				font-size: 24rpx;
				margin-top: 16rpx;
				margin-left: 20rpx;
			}
			.item-content {
				font-size: 20rpx;
				color: #666666;
				margin-left: 20rpx;
				margin-bottom: 12rpx;
			}
		}
	}
}
</style>
